use crate::components::{clear::Clear, copy::Copy};
use dioxus::prelude::*;
use hex;

#[component]
pub fn HexEncode() -> Element {
    let mut output_text = use_signal(|| String::new());
    let mut hex_input = use_signal(|| String::new());
    let mut convert_status = use_signal::<bool>(|| true);
    let mut url_encode = move || {
        if hex_input.read().is_empty() {
            output_text.set("不能输入空数据".to_string());
            return;
        }
        let url_str = &hex_input.read().to_string();
        let url_text = hex::encode(url_str);
        output_text.set(url_text.to_string());

        document::eval("setTimeout(() => hljs.highlightAll(), 10);");
    };

    rsx! {

        div { class: "flex-1 flex flex-col",
               div { class: "flex-1 p-8 overflow-auto",
                   div { class: "max-w-4xl mx-auto space-y-6",
                       div { class: "space-y-2",
                           h1 { class: "text-2xl font-bold text-gray-900", "Hex → 编码" }
                           p { class: "text-gray-600", "Hex 编码" }
                       }
                       div { class: "bg-card text-card-foreground border border-gray-200 rounded-2xl shadow-sm",
                           div { class: "p-6",
                               div { class: "space-y-4",
                                   div { class: "space-y-2",
                                       label { class: "text-sm font-medium text-gray-700",
                                           "粘贴hex到下方："
                                       }

                                       textarea {
                                           oninput:move |e| hex_input.set(e.value()),
                                           value:hex_input,
                                           spellcheck: "false",              // 关闭拼写检查
                                              autocapitalize: "off",            // 关闭首字母自动大写
                                              autocomplete: "off",              // 关闭自动补全

                                           class: "flex w-full border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[120px] rounded-xl border-gray-200 resize-none font-mono text-sm",
                                            placeholder: "e9ad94e6b395e5b888",
                                       }
                                   }
                               }
                               div { class: "flex items-center space-x-3 mt-6",
                                   button {
                                       onclick: move |_|url_encode() ,
                                       class: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u{0026}amp;_svg]:pointer-events-none [\u{0026}amp;_svg]:size-4 [\u{0026}amp;_svg]:shrink-0 h-10 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-xl transition-all duration-200 hover:scale-10",
                                       "编码"
                                   }

                                   Clear{
                                       targets:vec![hex_input.clone(),output_text.clone()],
                                   }

                               }
                           }
                       }
                       if !&output_text.read().is_empty() {
                       div { class: "bg-card text-card-foreground border border-gray-200 rounded-2xl shadow-sm",
                           div { class: "flex flex-col space-y-1.5 p-6 pb-4",
                               div { class: "flex items-center justify-between",
                                   div { class: "tracking-tight text-lg font-semibold text-gray-900 flex items-center",
                                       span { class: "mr-2", {format!("{}",if *convert_status.read() ==true{"✅"}else{"❌"}   )} }
                                       "输出"
                                   }
                                   div { class: "flex items-center space-x-2",
                                       Copy{

                                           val:output_text.read().to_string()
                                       }

                                   }
                               }
                           }

                               div { class: "p-6 pt-0",
                                   div { class: "bg-gray-50 rounded-xl p-4 font-mono text-sm text-gray-800 whitespace-pre-wrap overflow-x-auto",
                                      pre { class:"language-html",
                                          code {
                                              {output_text}
                                          }
                                      }
                                   }

                               }

                       }
                       }
                   }
               }
           }

    }
}
